<div class="experience">
  <div class="head">
    <img ref="logo" src="/intro/images/qw.png" style="display: none" />

    <h1><%=process.env.TITLE%></h1>
    <p>0风险无需挂机，辅助社群管理</p>
    <p>群成员参与获取积分，自主兑换奖励</p>
    <!-- <div class="toggle-btns" :style="{color:type==1 ? '#333333' :'#A3ACCB'}">
          <span @click="type=1">
              <i class="iconxuanzhong iconfont check" v-if="type==1"></i>
              <i class="iconfont iconweixin type-icon" :style="{color:type==1 ? '#19C15F' : '#A3ACCB'}"></i>
              微信群
          </span>
          <span @click="type=2" :style="{color:type==2 ? '#333333' :'#A3ACCB'}">
              <i class="iconxuanzhong iconfont check" v-if="type==2"></i>
              <i class="iconicon-test iconfont type-icon" style="color:#A3ACCB" v-if="type==1"></i>
              <img v-else src="@/assets/images/corp.png" />
              企微群
          </span>
      </div> -->
  </div>
  <!-- <p class="check-tip">
      <i class="iconfont iconshouzhi "></i>
      <span>请先选择您要想要裂变的社群类型</span>
      <i class="iconshouzhi iconfont"></i>
  </p> -->

  <div class="launch box">
    <div class="flow-head">
      <i class="iconfont iconkuaisu"></i>
      <div>
        <b>极速开启活动</b>
        <p><span>无需下载或安装任何应用</span>，仅需3步即可在群内进行邀请统计。</p>
      </div>
    </div>
    <ul class="big-orange">
      <li>
        <div>
          <span>第一步:</span>
          <div>
            <span>微信长按扫描下方二维码添加机器人为好友</span>

            <img src="<%=process.env.BOTQR%>" />
          </div>
        </div>
      </li>
      <!-- <li>
            <div >
                <span>第二步:</span>
                <div>
                    <span>将机器人设为星标朋友</span>
                    <img src="/intro/images/star_friend.png" />
                </div>
            </div>
        </li> -->
      <li>
        <div>
          <span>第二步:</span>
          <div>
            <span>把机器人拉入企微群</span>
            <img src="/intro/images/in-room.jpg" />
          </div>
        </div>
      </li>
      <li>
        <div>
          <span>第三步:</span>
          <div>
            <span>入群后进入链接设置群积分规则与奖励。</span>
          </div>
        </div>
      </li>
    </ul>
    <img style="width: 100%" src="/intro/images/manage-link.jpg?v3" />
  </div>

  <div class="tongji box">
    <div class="flow-head flex items-start">
      <img src="/intro/images/sign-icon.png" style="width: 5.5vw; height: 5.5vw; margin-top: 1vw; margin-right: 2vw" />
      <div>
        <b>群内签到得积分</b>
        <p>群成员在群内回复<span>【签到】</span>，机器人 自动提醒获得积分。</p>
      </div>
    </div>

    <img src="/intro/images/sign-diag.jpg?v2" />
  </div>

  <div class="rank box">
    <div class="flow-head">
      <img
        src="/intro/images/invite-icon.png"
        style="width: 5.5vw; height: 5.5vw; margin-top: 1vw; margin-right: 2vw"
      />
      <div>
        <b>邀请好友入群得积分</b>
        <p>群成员邀请好友入群，机器人自动提醒 获得积分。</p>
      </div>
    </div>

    <img src="/intro/images/invite-diag.jpg?v2" />
  </div>

  <div class="rank box">
    <div class="flow-head">
      <img src="/intro/images/red-icon.png" style="width: 5.5vw; height: 5.5vw; margin-top: 1vw; margin-right: 2vw" />
      <div>
        <b>积分兑换红包</b>
        <p>您可自定义红包金额、发放数量以及 所需积分，群成员进入兑换链接自行 兑换。</p>
      </div>
    </div>

    <img src="/intro/images/red.gif?v2" />
  </div>

  <div class="rank box">
    <div class="flow-head">
      <img src="/intro/images/mall-icon.png" style="width: 5.5vw; height: 5.5vw; margin-top: 1vw; margin-right: 2vw" />
      <div>
        <b>积分商城兑奖励</b>
        <p>积分可在积分商城的自由兑换，奖励模式 有实物邮寄/下线核销、红包、兑换码。</p>
      </div>
    </div>

    <img src="/intro/images/mall-diag.png" />
  </div>

  <div class="rank box">
    <div class="flow-head">
      <img src="/intro/images/draw-icon.png" style="width: 5.5vw; height: 5.5vw; margin-top: 1vw; margin-right: 2vw" />
      <div>
        <b>积分抽奖</b>
        <p>后台创建抽奖活动，群成员可使用积分 参与抽奖，开奖后在群内通知中奖成员。</p>
      </div>
    </div>

    <img src="/intro/images/draw-diag.png" />
  </div>

  <div class="rank box">
    <div class="flow-head">
      <img src="/intro/images/send-icon.png" style="width: 5.5vw; height: 5.5vw; margin-top: 1vw; margin-right: 2vw" />
      <div>
        <b>高效的群发辅助功能</b>
        <p>一键群发消息至多个群聊，可设置定时 发送或按周期发送消息。</p>
      </div>
    </div>

    <img src="/intro/images/send-diag.png" />
  </div>

  <div class="foot">
    <i class="iconfont icondibulogo"></i>
    <span class="kf-btn" onclick="app.showQr=true">免费开通</span>
  </div>
</div>

<div id="app" v-cloak v-show="showQr">
  <div class="weui-mask" @click="showQr=false"></div>
  <div class="weui-half-screen-dialog">
    <div class="weui-half-screen-dialog__hd">
      <div class="weui-half-screen-dialog__hd__side"></div>
      <div class="weui-half-screen-dialog__hd__main"></div>
      <div class="weui-half-screen-dialog__hd__side">
        <button class="weui-icon-btn" @click="showQr=false">
          <i class="weui-icon-close-thin"></i>
        </button>
      </div>
    </div>

    <div class="weui-half-screen-dialog__bd center" style="font-size: 4.53333vw; font-weight: bold">
      <div class="center">
        <img class="mx-auto" src="<%=process.env.BOTQR%>" width="180px" height="180px" />
        <div>长按识别上方二维码</div>
        <div>添加机器人<span class="blue">免费体验</span></div>
      </div>
    </div>
  </div>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: { showQr: false },
  });
</script>

<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>

  wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '<%=process.env.FUWUHAOID%>', // 必填，公众号的唯一标识
      timestamp: <%=jsapi.timestamp %>, // 必填，生成签名的时间戳
      nonceStr: '<%=jsapi.noncestr%>', // 必填，生成签名的随机串
      signature: '<%=jsapi.sign%>',// 必填，签名
      jsApiList: [ 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
    });


  wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
    wx.onMenuShareAppMessage({
      title: '<%=process.env.TITLE%>', // 分享标题
      desc: '点击免费使用群机器人', // 分享描述
      link: '<%=process.env.DOMAIN%>/admin/intro', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: '<%=process.env.DOMAIN%>/img/icons/wechat.png', // 分享图标
      success: function () {
        // 设置成功
      }
    })
    // wx.updateAppMessageShareData({
    //   title: '<%=process.env.TITLE%>', // 分享标题
    //   desc: '点击免费领取群积分机器人', // 分享描述
    //   link: '<%=process.env.DOMAIN%>/admin/intro', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    //   imgUrl: '<%=process.env.DOMAIN%>/intro/images/qw.png', // 分享图标
    //   success: function () {
    //     // 设置成功
    //   }
    // })
  });
</script>

<style>
  body {
    max-width: 640px;
    margin: 0 auto;
  }
  .iconfont {
    font-size: 4.26666vw;
  }
  .experience {
    background: #2047ec;
  }
  .experience .head {
    height: 65.866666vw;
    background: url("/intro/images/head_bg.png");
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 10.66666vw;
    color: #ffffff;
    text-align: center;
  }
  .experience .head h1 {
    margin-bottom: 5.33333vw;
    font-size: 10.66666vw;
  }
  .experience .head p {
    font-size: 5.33333vw;
  }
  .experience .head p:first-of-type {
    margin-bottom: 2vw;
  }
  .experience .head p:last-of-type {
    margin-bottom: 4.533333vw;
  }
  .experience .head .toggle-btns {
    color: #333333;
    display: flex;
    justify-content: center;
  }
  .experience .head .toggle-btns span {
    width: 34.66666vw;
    height: 10.66666vw;
    background: #ffffff;
    border-radius: 0.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .experience .head .toggle-btns span:first-of-type {
    margin-right: 8vw;
  }
  .experience .head .toggle-btns span i.check {
    font-size: 2.66666vw;
    color: #385cf2;
    margin-right: 2.93333vw;
  }
  .experience .head .toggle-btns span i.type-icon {
    margin-right: 2.93333vw;
  }
  .experience .head .toggle-btns span img {
    width: 6vw;
    height: 5.3333vw;
    margin-right: 2.93333vw;
  }
  .experience .check-tip {
    text-align: center;
    color: #fff;
    font-size: 4vw;
    margin-bottom: 8vw;
  }
  .experience .check-tip span {
    margin: 0 1vw;
  }
  .experience .check-tip i {
    font-size: 5.3333vw;
    color: #ffd255;
  }
  .experience .launch .flow-head .iconfont {
    color: #3168ff;
  }
  .experience .launch ul {
    margin: 4.8vw 0;
  }
  .experience .launch ul li {
    display: flex;
    position: relative;
  }
  .experience .launch ul li::before {
    content: "";
    background: #385cf2;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    margin-right: 7.7333vw;
    width: 2.13333vw;
    height: 2.13333vw;
    top: 1.33333vw;
    left: 1.33333vw;
  }
  .experience .launch ul li::after {
    content: "";
    width: 0;
    border-left: 0.2666vw dashed #385cf2;
    height: calc(95.3334%);
    position: absolute;
    top: 4.26666vw;
    left: 2.1333vw;
  }
  .experience .launch ul li > div {
    width: 56vw;
    display: flex;
  }
  .experience .launch ul li > div > span {
    width: 13.33333vw;
    flex-shrink: 0;
  }
  .experience .launch ul li img {
    width: 37.3333vw;
    margin: 4.8vw 0;
  }
  .experience .launch ul li:last-of-type::after {
    display: none;
  }
  .experience .tongji .flow-head .iconfont {
    color: #ff8976;
  }
  .experience .tongji img {
    width: 78vw;
    margin-top: 4.8vw;
  }
  .experience .rank .flow-head .iconfont {
    color: #fbb055;
  }
  .experience .rank img {
    width: 78vw;
    margin-top: 4.8vw;
  }
  .experience .more h4 {
    color: #3168ff;
    text-align: center;
    font-size: 4.5333vw;
  }
  .experience .more dl {
    margin-top: 4vw;
  }
  .experience .more dl.group dd:nth-of-type(3n-1) {
    text-align: center;
  }
  .experience .more dl.fiss {
    margin-bottom: 0;
  }
  .experience .more dl.fiss dd {
    display: block;
    width: 100%;
  }
  .experience .more dl dt {
    color: #ff8900;
    font-weight: 500;
    margin-bottom: 5.8666vw;
  }
  .experience .more dl dd {
    display: inline-block;
    width: 33%;
    font-size: 3.46666vw;
    margin-bottom: 5.333vw;
  }
  .experience .more dl dd .iconfont {
    color: #ff8900;
    margin-right: 1.06666vw;
    font-size: 3.73333vw;
  }
  .experience .foot {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .experience .foot .iconfont {
    color: #afdbff;
    font-size: 5.3333vw;
  }
  .experience .foot .kf-btn {
    height: 11.7333vw;
    width: 92vw;
    background: linear-gradient(159deg, #f5c31f 0%, #f89c11 96%, #f89b10 100%);
    color: #fff;
    text-align: center;
    line-height: 11.7333vw;
    margin-top: 5.333vw;
    border-radius: 5.8666vw;
    font-size: 4.8vw;
    font-weight: 600;
    margin-bottom: 8vw;
  }
  .experience .action-content {
    background: #fff;
    box-sizing: border-box;
    padding: 10.6666vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .experience .action-content img {
    width: 42.1333vw;
    margin-bottom: 8.26666vw;
  }
  .experience .action-content p {
    line-height: 6vw;
  }
  .experience .action-content a {
    color: #5769a8;
    margin-top: 5.3333vw;
  }
  .flow-head {
    display: flex;
  }
  .flow-head i {
    font-size: 6.6666vw;
    margin-right: 5.6666vw;
  }
  .flow-head > div {
    flex: 1;
  }
  .flow-head > div b {
    color: #3168ff;
    font-size: 4.53333vw;
    margin-bottom: 1.3333vw;
  }
  .flow-head > div p {
    font-size: 3.73333vw;
  }
  .flow-head > div p span {
    color: #ff8900;
  }

  .big-orange {
    font-size: 3.73333vw;
    color: #ff8900;
  }
  .box {
    background: #fff;
    width: 89.06666vw;
    border-radius: 1.33333vw;
    box-sizing: border-box;
    padding: 4.26666vw 5.3333vw;
    margin: 5.06666vw auto;
  }
</style>
